<template>
<!-- 巡检任务详情 -->

  <div v-dialog-drag>
      <!-- elementui的弹窗 :visible.sync绑定的数据，是控制弹窗打开关闭的数据 -->
      <el-dialog  z-index="1999" title="详情" :visible.sync="dialogVisible" width="30%" align="center" top="10vh" :destroy-on-close="true">
        <!-- show-header=false不显示标题, span-method=fun 合并列的方法 -->
        <el-table
          :show-header="false"
          :data="tableData"
          center
          border
         
          style="width: 100%; margin-top: 10px;"
          :span-method="arraySpanMethod"
        >
          <el-table-column width="180" prop="name" align="center" />
          <el-table-column prop="amount1" align="center"/>
        </el-table>
        <el-table
          v-if="showFileList"
          :data="fileList"
          :border="true"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          />
          <el-table-column
            label="类型"
            width="100"
            align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.file_type == '1'">图片</span>
              <span v-if="scope.row.file_type != '1'">文件</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="file_name"
            label="名称"
            width="180"
            align="center"
          />
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
               <el-button
              type="success"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-button>
             <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>

            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%; text-align: right" class="close">
          <el-button type="primary" size="mini" @click="close">关闭</el-button>
        </div>
      </el-dialog>
       <!-- 图片预览 -->
    <el-image-viewer z-inex="3000" v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
  </div>


  
</template>

<script>
import { spectionDetail, spectionPlanFileTaskList ,delPlanFile} from '@/api/operations'

export default {
  name: 'inspectionTaskInfo',
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      fileList: [],
      showFileList: false,
       imgViewerVisible: false, // 图片预览标识
         imgList: [], // 预览图片数据
    }
  },
  methods: {
    // 打开弹窗
    open(row) {
      // 修改打开弹窗的变量为true，就可以打开弹窗了
      this.dialogVisible = true;

      // 调用接口的参数
      let params = {
        id: row.id
      };
      // 调用详情接口
      spectionDetail(params).then(res => {
        let detailData = res.data;
        // 构造表格数据
        this.tableData = [{
          name: "计划编号",
          amount1: detailData.spec_num
        }, {
          name: "任务编号",
          amount1: detailData.task_num
        }, {
          name: "站点",
          amount1: detailData.site_name
        }, {
          name: "计划标题",
          amount1: detailData.task_title
        }, {
          name: "计划内容",
          amount1: detailData.task_content
        }, {
          name: "计划周期",
          amount1: detailData.plan_cycle_string
        }, {
          name: "开始时间",
          amount1: detailData.task_start
        }, {
          name: "结束时间",
          amount1: detailData.task_end
        }, {
          name: "创建人",
          amount1: detailData.user_name
        }, {
          name: "创建时间",
          amount1: detailData.created_at
        },{
            name: '附件'
        }
        // ,{
        //     name: '无上传附件'
        //   }
        ];

        // 调用附件接口
        let fileParams = {
          offset: 0,
          limit: 20,
          plan_id: row.id
        };
        spectionPlanFileTaskList(fileParams).then(res => {
          this.fileList = res.data.files;
          //有附件
          if(this.fileList.length > 0) {
            this.showFileList = true;
          }else{
            this.showFileList = false;
            this.tableData.push({
              name: '无上传附件'
            });
          }
        });
      });
    }, 
  
    close(row) {
      // 关闭弹窗的变量为false，就可以关闭弹窗了
      this.dialogVisible = false;
    },
    // 和并列的方法
    arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 把列合并为行
      if (rowIndex === 10 || rowIndex === 11) { //  首先筛选行数 0 ， 2 ，4
        if (columnIndex === 0) { // 当列数为0，开始，
          return [1, 2] // 把2列合并为一行
        }
      }
    },
      // 关闭图片预览
    closeImgViewer() {
      this.imgViewerVisible = false
    },
    // 删除附件
      del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPlanFile({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
             // 调用附件接口
        let fileParams = {
          offset: 0,
          limit: 20,
          plan_id: id
        };
        spectionPlanFileTaskList(fileParams).then(res => {
          this.fileList = res.data.files;
          //有附件
          if(this.fileList.length > 0) {
            this.showFileList = true;
          }else{
            this.showFileList = false;
            this.tableData.push({
              name: '无上传附件'
            });
          }
        });
        })
      })
    },
     /**
     * @description: 查看附件/图片
     * @author: 书童
     */
    checkInfo(row) {
      console.log(row.file_url)
      if (row.file_type === '1') {
        // 图片
        this.imgViewerVisible = true
        this.imgList = [row.file_url]
      } else {
        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.file_url)
      }
    },
  }
}
</script>

<style>
  .close{
    margin-top: 10px;
  }
</style>
